<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="建单后变更" v-model="visible" align-center width="500px" :z-index="2000" @close="handleClose">
    <el-form label-position="top" :label-width="140" ref="formRef">
      <el-form-item label="实际运输方式" prop="transport_type">
        <VSelect v-model="form.transport_type" placeholder="请选择" :options="options.transport_type" class="w-full" @change="form.delivery_method=null"/>
      </el-form-item>
      <el-form-item label="派送方式" prop="delivery_method">
        <VSelect v-model="form.delivery_method" placeholder="请选择" :options="matchedDeliveryList" class="w-full" />
      </el-form-item>
      <el-form-item label="预计发货数量" prop="qa_user_id">
        <el-input-number v-model="form.deliver_num" controls-position="right" :min="0" :step="1" :precision="0" placeholder="请输入" class="w-full" />
      </el-form-item>
      <el-form-item label="预计发货日期" prop="inspection_num">
        <el-date-picker v-model="form.deliver_time" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.create" @click="create(formRef)">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import { resSkip } from '@/utils/res'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const {options} = toRefs(props)
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})

// 表单处理
const form = ref({})
const isOnly = ref(false)
const formRef = ref()
// 打开弹窗
const open = async (dp_id, row) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  isOnly.value = !!row
  const { transport_type, deliver_num, deliver_time ,country,delivery_method} = row || {}
  form.value = { dp_id, transport_type, deliver_num, deliver_time,country,delivery_method }
  loadings = reactive({})
  visible.value = true
  formRef?.value?.resetFields()
}
const matchedDeliveryList = computed(() => {
  const item = options.value.processDeliveryMethod.find(d => d.id === form.value.transport_type);
  if (!item) return [];
  return item.delivery_method
    .filter(m => m.country.includes(form.value.country))
    .map(m => ({ label: m.name, value: m.id }));
});
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const create = async (is_skip = 1) => {
  const hasValue = Object.values(form.value).filter((d, i) => i).filter(d => d).length
  if (!isOnly.value && !hasValue) {
    ElMessage.error('必须填其中一项才能提交')
    return
  }
  loadings.create = true
  api.orderChange({...form.value, is_skip}).then(res => {
    resSkip({
      res,
      closeLoading: () => loadings.create = false,
      success: () => {
        close()
        emit('success')
      },
      submit: () => {
        create(2)
      },
    })
  }).finally(() => {
    loadings.create = false
  })
}

defineExpose({ open })
</script>